<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                width: 100%;
                height: 30px;
                background: lightblue;
                border-collapse: collapse;
            }
            td {
                width: 50%;
                text-align: center;
                border: 1px solid lightgreen;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入城市名" value="郑州" id="city">
        <button id="btn">查询</button>
        <table id="city_table">
            <tr>
                <td>城市名称</td>
                <td>城市id</td>
            </tr>
        </table>
        
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script>
            $(function(){
               $("#btn").click(function(){
//                  alert(11); 
//                    获取可用城市名
                    $.ajax({
                        url:"http://apis.baidu.com/apistore/weatherservice/citylist",
                        type:"get",
//                        如果是多个参数,最好写成对象,表单要序列化
                        data:{cityname:$("#city").val()},
//                        默认 返回的是 json 字符串  加上datatype
                        dataType:"json",
                        headers:{apikey:"9a2ac19e6f5d2ab92f34d7c53e94be9c"},
                        success:function(response,status,xhr) {
//                            console.log(response);
                            if(response.errMsg === "success") {
                                var ret_obj =  response.retData;
                                var html = $("#city_table").html();
                                for(var i = 0;i < ret_obj.length;i++){
                                    var city_obj = ret_obj[i];
//                                    console.log(city_obj.area_id);
//                                    console.log(city_obj.name_cn);
                                    html += '<tr>';
                                    html += '<td>';
                                    html += "<a target='__blank' href='city_weather.php?cityname="+city_obj.name_cn+"&cityid="+city_obj.area_id+"'>";
                                    html += city_obj.name_cn;
                                    html += "</a>";
                                    html += '</td>';
                                    html += '<td>';
                                    html += city_obj.area_id;
                                    html += '</td>';
                                    html += '</tr>';

                                 $("#city_table").html(html);
                                }
                            }
                        }
//                        下载仓库 , 克隆 ,写完了 先从上游获取, 在推入到上游
//                        error:function(response,status,xhr){
//                            断网时,url有错时才用到  所以现在可以不写
//                            console.log(response);
//                        }
                    });
               });
            });
        </script>
        <!--error: -->
    </body>
</html>
